<template>
  <!-- 区域分布 -->
  <div>
    <div>
      <polylineColumnBlendEcharts ref="polylineColumnBlendEcharts" :option-data="echartsData" />
    </div>
  </div>
</template>

<script>
import polylineColumnBlendEcharts from '@/views/bond/bondPositionInformation/polylineColumnBlendEcharts.vue'
export default {
  components: {
    polylineColumnBlendEcharts
  },
  props: {
    echartsDataParent: {
      type: Object,
      default: () => undefined
    }
  },
  data() {
    return {
      showEcharts: false,
      echartsData: undefined
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.echartsData = {
        titleZ: this.$t('金额'),
        titleX: this.$t('数量'),
        dataZ: [9, 6.7, 5.6, 4.5, 4.3, 4.2, 3.3, 2.4, 2.0, 1.5, 1.0, 0],
        dataX: [10, 5, 5, 4, 3, 3, 3, 2, 1, 1, 1, 0],
        optionsArr: ['北京', '上海', '天津', '河南', '湖北', '安徽', '山东', '福建', '河北', '辽宁', '广东', '江苏'],
        leftName: this.$t('债券余额(万元)'),
        rightName: this.$t('债券数量')
      }
      if (this.echartsDataParent !== undefined) {
        this.echartsData = this.echartsDataParent
      }
      this.showEcharts = true
    }
  }
}
</script>

<style scoped>

</style>
